<template>
  <div id="externalContainer">
    <div class="main-container">
      <!--      <split-vertical title="诉单管理"></split-vertical>-->


      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div v-if="showSearchCondition">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="ruleForm.startDate"
                  size="medium"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间">
                <el-date-picker
                  size="medium"
                  v-model="ruleForm.endDate"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item label="联系方式">
                <el-input v-model="ruleForm.customerContact" size="medium" clearable placeholder="请输入联系方式"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="6">
              <el-form-item label="诉单状态">
                <el-select v-model="ruleForm.statusCode" placeholder="请选择" size="medium" clearable>
                  <el-option
                    v-for="item in comStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="诉单日期">
                <el-date-picker
                  size="medium"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  v-model="ruleForm.complainTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="责任方">
                <el-select v-model="ruleForm.responsibleParty" placeholder="请选择" size="medium" clearable>
                  <el-option
                    v-for="item in ResponsibleParty "
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客诉类型">
                <el-select v-model="ruleForm.complainType" placeholder="请选择" size="medium" clearable filterable allow-create>
                  <el-option
                    v-for="item in exchangeGoods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否解决">
                <el-select v-model="ruleForm.isSolve" placeholder="请选择" size="medium" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="6">
              <el-form-item label="客户姓名">
                <el-input v-model="ruleForm.customerName" size="medium" clearable placeholder="请输入客户姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单编号">
                <el-input placeholder="请输入订单编号" v-model="ruleForm.orderCode" size="medium" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="query" size="small">查询</el-button>
                <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                <span v-if="isSearch === true"  @click="simple" style="color:#3c8dbc">高级搜索</span>
                <span v-else @click="simpleA" style="color:#3c8dbc;margin-left:20px;" >简单搜索</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row v-if="isSearch">
          <el-col :span="6">
            <el-form-item label="客户姓名">
              <el-input v-model="ruleForm.customerName" size="medium" clearable placeholder="请输入客户姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input placeholder="请输入订单编号" v-model="ruleForm.orderCode" size="medium" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="query" size="small">查询</el-button>
              <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
              <span v-if="isSearch === true"  @click="simple" style="color:#3c8dbc;margin-left:20px;">高级搜索</span>
              <span v-else @click="simpleA" style="color:#3c8dbc;margin-left:20px;" >简单搜索</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="stand">
      <div class="createBtn">
        <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
      </div>
      <div style="margin:0 10px;" >
        <v-table :tableParams="tableParams"  v-on:handleOperation="handleOperation"></v-table>
      </div>
    </div>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount">
          </el-pagination>
        </div>
      </div>
      <comDel v-if="isShowDel" @closeDialog="closeDialog" :id="id"></comDel>
      <!-- 退货入库 -->
      <import-complaint v-if="isShowImport" @closeDialog="closeDialog" :items="items"></import-complaint>
      <confirm-stock v-if="isStockIn" @closeDialog="closeDialog" :stockInfo="stockInfo"></confirm-stock>

  </div>
</template>
<script>
  import VTable from "components/common/PageTable/VTable"
  import axios from 'axios'
  import {localStorage} from 'js/localStorage'
  import SplitVertical from "components/common/SplitVertical"
  import VButton from "components/common/VButton"

  var comType = {
    '0': '咨询',
    '1': '退货',
    '2': '换货',
    '3': '补发'
  }
  var resList = {
    '1': '无',
    '2': '邮政',
    '3': '厂家'
  }
  var solvy = {
    "true": "已解决",
    "false": "未解决"
  }
  export default {
    inject: ['reload'],
      components: {
      VTable, SplitVertical,VButton
    },
    data() {
      return {
        operationBtnArray: [{
          text: '刷新',
          icon:'el-icon-refresh',
          show: true,
          type: 'primary',
          methodName: 'refresh',
        }, {
          text: '新增',
          show: true,
          icon:'el-icon-plus',
          type: 'success',
          methodName: 'add',
        },
          {
            text: '导出',
            icon:'el-icon-download',
            show: true,
            type: 'warning',
            methodName: 'export',
          }],
        id: '',
        complaint: {},
        options: [{
          value: 'true',
          label: '已解决'
        }, {
          value: 'false',
          label: '未解决'
        }],
        isShowDel: false,
        //v-model
        startDate: '',
        endDate: '',
        orderCode: '',
        statusCode: '',
        complainTime: '',
        responsibleParty: '',
        complainType: '',
        isSolve: '',
        customerName: '',
        customerContact: '',
        //list列表
        complaintList: [],
        complaintInfo: {},
        currentPage4: 1,
        show: false,
        showTip: false,
        isStockIn: false,
        pageCount: 0,
        pageIndex: 1,
        pageSize: 10,
        exchangeGoods: [
          {
            value: '0',
            label: "咨询",
          }, {
            value: '1',
            label: '退货'
          }, {
            value: '2',
            label: '换货'
          }, {
            value: '3',
            label: '补发'
          }],
        //责任方
        ResponsibleParty: [
          {
            value: '1',
            label: "无",
          }, {
            value: '2',
            label: '邮政'
          }, {
            value: '3',
            label: '厂家'
          }],
        comStatus: [
          {
            value: '0',
            label: "开始",
          },
          {
            value: '1',
            label: "完成",
          }
        ],
        isShowImport: false,
        items: {},
        stockInfo: {},
        tableParams:{
          dataArray:[],
          showMultiSelection:false,
          columnArray:[
            {label: '日期', prop: 'complainTime',width:'150',sortable: false},
            {label: '客诉编码', prop: 'complainCode',  sortable: false},
            {label: '订单编号', prop: 'orderCode', sortable: false},
            {label: '姓名', prop: 'customerName',sortable: false,width:'85'},
            {label: '联系方式', prop: 'customerContact',sortable: false},
            {label: '责任方', prop: 'responsibleParty',sortable: false,width:'85'},
            {label: '客诉类型', prop: 'complainType',sortable: false,width:'85'},
            {label: '诉单状态', prop: 'statusMessage',sortable: false,width:'85'},
            {label: '是否解决', prop: 'isSolve',sortable: false,width:'80'},
            {label: '录入人', prop: 'username',sortable: false,width:'80'}
          ],
          rowHandle:{
            buttonArray:[
              {
                text: '解决',
                show: true,
                type: 'text',
                methodName: 'solve'
              }
            ],
            view:{
              show:false
            }
          }
        },
        editData:'',
        id:'',
        //v-model
        ruleForm:{
          startDate: '',
          endDate: '',
          orderCode: '',
          statusCode: '',
          complainTime: '',
          responsibleParty: '',
          complainType: '',
          isSolve: '',
          customerName: '',
          customerContact: '',
        },
        showSearchCondition:false,
        isSearch:true,
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.userId = localStorage.get('userID')
        this.externalComplainList()
      },
      //查询
      query() {
        let parmas=this.ruleForm;
            parmas['pageIndex']=1
            parmas['pageSize']=10
        let success = data => {
            if (data.code == 'OK') {
              this.tableParams.dataArray = data.data
              this.pageCount = data.pageCount
            } else {
              this.$message.error(data.msg)
            }
        }
        this.api.externalComplainList(parmas, success)
      },
      simple(){
        this.showSearchCondition=true
        this.isSearch=false
      },
      simpleA(){
        this.showSearchCondition=false,
          this.isSearch=true
      },
      handleSearchTopBtn(methodName) {
        if (methodName === "refresh") {
          this.refresh();
        } else if(methodName == "add"){
          this.createComplaint();
        }else{
          this.exportExcel()
        }
      },
      handleOperation(rowIndex, row, methodName) {
        this.id=row.id
        if(methodName == "update"){
          this.editExternalData()
        }else if(methodName == "delete"){
          this.del()
        }else{
          this.solveExternal()
        }
      },
      editExternalData(){
        this.$router.push({
          path:"/external-complain-edit",
          query:{
            id:this.id
          }
        })
      },
      solveExternal() {
        this.$confirm('是否要解决此客诉?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parmas = {
            id: this.id
          }
          let success = data => {
            if (data.code == 'OK') {
              this.$message.success(data.msg)
              this.reload()
            } else {
              this.$message.error(data.msg)
            }
          }
          this.api.externalComplainSolve(parmas, success)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      },
      //关闭弹框
      closeDialog() {
        this.isShowDel = false
        this.isShowImport = false
        this.isStockIn = false
      },
      //刷新
      refresh() {
        this.externalComplainList()
      },
      //table的list列表
      externalComplainList() {
        let parmas = {
          pageIndex: 1,
          pageSize: 10,
        }
        let success = data => {
          if (data.code == 'OK') {
            this.pageCount = data.pageCount
            this.tableParams.dataArray = data.data
            data.data.forEach((ele)=>{
              ele.responsibleParty=resList[ele.responsibleParty]
              ele.complainType=comType[ele.complainType]
              ele.isSolve=solvy[ele.isSolve]
            })
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.externalComplainList(parmas, success)
      },
      //导出excel
      exportExcel() {
        this.$confirm('是否要导出该文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method: 'post',
            url: '/api/erp/v1/external/complain/download',
            responseType: 'blob',
          }).then(res => {
            if (res.status == "200") {
              const link = document.createElement('a')
              let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '外部客诉信息表' + '.xlsx')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
            } else {
              this.$message.error('数据错误')
            }
          }).catch(error => {
            console.log(error, "RRRRR")
          })
        });
      },

      //重置
      resetForm() {
        this.ruleForm=''
      },
      //创建
      createComplaint() {
        this.$router.push({
          path: '/external-complain-add'
        })
      },
      handleCurrentChange(val) {
        let parmas=this.ruleForm;
        parmas['pageIndex']=val
        parmas['pageSize']=10
        let success = data => {
          if (data.code == 'OK') {
            this.tableParams.dataArray = data.data
            data.data.forEach(ele=>{
              ele.responsibleParty=resList[ele.responsibleParty]
              ele.complainType=comType[ele.complainType]
              ele.isSolve=solvy[ele.isSolve]
            })
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.externalComplainList(parmas, success)
      },
      //删除
      del() {
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parmas = {
            id:this.id,
          }
          let success = data => {
            if (data.code == 'OK') {
              this.reload()
              this.$message.success("删除成功")
            } else {
              this.$message.error(data.msg)
            }
          }
          this.api.externalComplainDelete(parmas, success)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
  }
</script>
<style  scoped>
  .el-table td {
    padding: 2px 0 !important;
  }
</style>
<style lang="scss" scoped>
  #externalContainer {
    .main-container {
      background: #fff;
      height:auto;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;

      .el-form-item{
        margin-bottom: 10px !important;
        .el-select {
          width: 96%;
        }
        .el-input {
          width: 96%;
        }
      }
    }
    .createBtn {
      line-height: 45px;
      margin-left: 10px;
    }
    .pagination {
      padding:10px 0;
      text-align: right;
    }
  }
</style>
